<template>
  <div class="nav">
    <ul>
      <li @click="task()">
        <img v-if="tableData.PageStatus == 1" src="../../../../static/images/Navigation11.png" alt="图片无法加载">
        <img v-else src="../../../../static/images/Navigation1.png" alt="图片无法加载">
        <p :class="{'active':tableData.PageStatus == 1}">任务</p>
      </li>
      <li @click="dynamic()">
        <img v-if="tableData.PageStatus == 2" src="../../../../static/images/Navigation21.png" alt="图片无法加载">
        <img v-else src="../../../../static/images/Navigation2.png" alt="图片无法加载">
        <p :class="{'active':tableData.PageStatus == 2}">动态</p>
      </li>
      <li @click="notice()">
        <img v-if="tableData.PageStatus == 3" src="../../../../static/images/Navigation31.png" alt="图片无法加载">
        <img v-else src="../../../../static/images/Navigation3.png" alt="图片无法加载">
        <p :class="{'active':tableData.PageStatus == 3}">通知</p>
      </li>
      <li @click="agent()">
        <img v-if="tableData.PageStatus == 4" src="../../../../static/images/Navigation41.png" alt="图片无法加载">
        <img v-else src="../../../../static/images/Navigation4.png" alt="图片无法加载">
        <p :class="{'active':tableData.PageStatus == 4}">代理人</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { global } from '../../filter/global-api'
import _common from '../../framework/commonJs/wptx_common'
import _tools from '../../framework/commonJs/wptx_tools'
const _FUNCTION_NAME = _common.pageName.WPTXNAVSDO
export default {
  props: {
    pageStatus: Number
  },
  data() {
    return {
      tableData: {
        PageStatus: 1
      },
      customData: {}
    }
  },
  mounted() {
    const self = this
    self.tableData.PageStatus = self.PageStatus
  },
  methods: {
    task() {
      const self = this
      if (self.tableData.PageStatus == 1) {
      }
      self.$router.push({ name: _common.router.SDO.TASK.LIST })
    },
    dynamic() {
      const self = this
      if (self.tableData.PageStatus == 2) {
        return false
      }
    },
    notice() {
      const self = this
      if (self.tableData.PageStatus == 3) {
        return false
      }
    },
    agent() {
      const self = this
      if (self.tableData.PageStatus == 4) {
        return false
      }
    }
  }
}
</script>
<style>
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  font-size: 10px;
  -moz-box-shadow: 0px -1px 5px #aaa;
  -webkit-box-shadow: 0px -1px 5px #aaa;
  box-shadow: 0px -1px 5px #aaa;
  background-color: #fff;
}
.nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.nav li {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.nav img {
  width: 23px;
  height: 23px;
  margin-bottom: 5px;
}
.nav p {
  font-size:12px;
  color: #7f8389;
}
.nav p.active {
  color: #1890ff;
}
</style>
